<template>
    <div class="nest">
        <!-- <el-form class="search-form" inline size="mini">
            <el-form-item>
                <el-input v-model="search.title" placeholder="输入活动名称" clearable @change="getList" />
            </el-form-item>
            <el-form-item>
                <el-select v-model="search.status" placeholder="状态" clearable @change="getList">
                    <el-option label="启用" value="1" />
                    <el-option label="禁用" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查询</el-button>
                <el-button icon="el-icon-refresh-left" size="mini" @click="handleResetSearch">重置</el-button>
            </el-form-item>
            <addClassify ref="addClassify" @success="getList"></addClassify>
        </el-form> -->
        <addClassify ref="addClassify" @success="getList"></addClassify>
        <div class="table">
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" v-loading="loading">
                <el-table-column prop="id" label="ID" show-overflow-tooltip width="150">
                </el-table-column>
                <el-table-column prop="sort" label="排序" show-overflow-tooltip width="150">
                </el-table-column>
                <el-table-column prop="title" label="活动名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="img" label="活动图片" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-image :src="scope.row.img" :preview-src-list="[scope.row.img]" style="width: 150px" />
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" show-overflow-tooltip width="150">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" disabled :active-value="1" :inactive-value="2">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="奖励信息" show-overflow-tooltip>
                    <template slot-scope="{row}">
                        <div>总奖励：{{ row.activity_reward }}</div>
                        <div>剩余奖励：{{ row.activity_remain_reward }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="起止时间" show-overflow-tooltip>
                    <template slot-scope="{row}">
                        <div>开始：{{ row.start_time }}</div>
                        <div>结束：{{ row.end_time }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini"
                            @click="$refs.addClassify.handleEdit(scope.row)">编辑</el-button>
                        <!-- <el-button type="danger" size="mini" @click="nestDelete(scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div style="text-align: right;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="search.page" :page-sizes="[10, 20, 30, 40, 100]" :page-size="search.size" background
                    layout="total, sizes, prev, pager, next" :total="total">
                </el-pagination>
            </div> -->
        </div>
    </div>
</template>

<script>
import addClassify from "./addClassify.vue"

export default {
    components: { addClassify },
    data() {
        return {
            loading: false,
            // search: {
            //     title: "",	//true	string		名称
            //     status: "",	//true	string		状态 0 全部 1 启用 2 禁用
            //     page: 1,	//true	int		当前页
            //     size: 10,	//true	int		每页多少条
            // },
            tableData: [],
            // total: 0
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // // 删除
        // nestDelete(data) {
        //     this.$confirm(`确认删除【${data.title}】活动图吗？`, '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(async () => {
        //         let res = await this.$request({
        //             url: '/admin/work.activity/delete',
        //             method: 'post',
        //             data: { id: data.id }
        //         })
        //         if (res.code == 200) {
        //             this.$message.success("删除成功")
        //             this.getList()
        //         }
        //     })
        // },
        // // 修改状态
        // async updatastatus(data) {
        //     let res = await this.$request({
        //         url: '/admin/work.activity/status',
        //         method: 'post',
        //         data: { id: data.id }
        //     })
        //     if (res.code == 200) {
        //         this.$message.success("操作成功")
        //     }
        // },
        // 列表
        async getList() {
            this.loading = true
            let res = await this.$request({
                url: '/admin/work.activity/index',
                method: 'get',
                // params: this.search
            })
            this.loading = false
            if (res.code == 200) {
                this.tableData = res.result
                // this.total = res.result.total
            }
        },
        // handleResetSearch() {
        //     this.search = {
        //         title: "",	//true	string		名称
        //         status: "",	//true	string		状态 0 全部 1 启用 2 禁用
        //         page: 1,	//true	int		当前页
        //         size: 10,	//true	int		每页多少条
        //     }
        // },
        //分页
        handleSizeChange(e) {
            this.search.size = e;
            this.getList()
        },
        handleCurrentChange(e) {
            this.search.page = e;
            this.getList()
        },
    }
}
</script>

<style lang="scss">
.nest {
    width: 100%;
    height: 60px;

    .search-form {
        background: #fff;
        border-radius: 12px;
        padding: 12px 20px;
        margin-bottom: 20px;

        .el-form-item--mini.el-form-item {
            margin-bottom: 0;
        }
    }

    .table {
        padding: 12px 20px;
        background: #fff;

        .el-table__body-wrapper {
            max-height: calc(100vh - 300px);
            overflow-y: auto;
        }
    }
}
</style>
